<template>
    <div>
        <el-card>
            <div>
                <el-form>
                    <el-form-item label="搜索">
                        <el-input class="input" placeholder="输入项目名称" v-model="key" clearable ></el-input>
                        <el-button type="primary" class="btn" icon="el-icon-search" @click="searchProject">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="projectList"
                    border
                    style="width: 100%"
                >
                    <el-table-column
                        type="selection"
                        width="55">
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="createdAt"
                        sortable
                        label="提交时间" >
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="project_name"
                        label="项目名称" >
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="Competition.competition_name"
                        label="参赛意向" >
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="projectOrganizer.username"
                        label="发布者账号" >
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="username"
                        label="召集详情" >
                        <template slot-scope="scope">
                            <el-button type="text" @click="showDetail(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        header-align="center"
                        align="center"
                        prop="username"
                        label="审核" >
                        <template slot-scope="scope">
                            <span class="status" v-show="scope.row.audit_status==1&&scope.row.status==0">已通过</span>
                            <span class="status" v-show="scope.row.audit_status==-1&&scope.row.status==0">已驳回</span>
                            <el-button type="text" class="btns" @click="isSubmit(scope,1)" v-show="scope.row.audit_status==0&&scope.row.status==0">通过</el-button>
                            <el-button type="text" class="btns" @click="isSubmit(scope,2)" v-show="scope.row.audit_status==0&&scope.row.status==0">驳回</el-button>
                            <el-button type="text" class="btns" @click="isSubmit(scope,3)" v-show="scope.row.status==0&&scope.row.status==0">删除</el-button>
                            <span class="status" v-show="scope.row.status==-1">已删除</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        @prev-click="gotoPrePage"
                        @next-click="gotoNextPage"
                        :total="allPages">
                    </el-pagination>
                </div>
            </div>
        </el-card>

        <el-dialog
            title="召集详情"
            :visible.sync="dialog"
            width="40%"
        >
            <div class="dialog">
                <div class="dialogTitle">
                    {{detail.project_name}}
                </div>
                <hr class="hr"/>
                <div class="demandTtile">
                    一、召集需求
                </div>
                <div class="demand">
                    {{detail.demand}}
                </div>
                <div class="demandTtile">
                    二、召集详情
                </div>
                <div class="detail" v-html="detail.project_info">
                    
                </div>
                <div class="demandTtile">
                    三、图片
                </div>
                <div>
                    <div class="empty" v-show="detail.image==[]">
                        暂无数据~
                    </div>
                    <div v-for="image in detail.image" :key="image.name">
                        <el-image
                            :src="image.name"
                            ></el-image>
                    </div>
                </div>
                <div class="demandTtile">
                    四、附件
                </div>
                <div>
                    <div class="empty" v-show="accessory.length==0">
                        暂无数据~
                    </div>
                    <div v-for="item in accessory" :key="item.newname" class="accessory">
                        <a :href="item.newname" target="_blank">{{item.originalName}}</a>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="dialog = false">取 消</el-button> -->
                <el-button type="primary" @click="dialog = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {getProjectList,updateAuditStatus,searchProject} from '@/api/convene'
export default {
    name:'postManagement',
    data() {
        return {
            key:'',//搜索关键字
            page:1,//当前页面
            allPages:1,//页面数量
            dialog:false,//对话框
            status:0,//当前的页面状态
            projectList:[],//召集列表
            detail:{},//召集详情
            accessory:[],//当前查看项目的附件
        }
    },
    watch:{
        key(newValue){
            if(newValue==''){
                this.status = 0
                this.getProjectList()
            }
        }
    },
    mounted(){
        this.getProjectList()
    },
    methods:{
        //获取召集列表
        getProjectList(){
            getProjectList({
                page:this.page
            }).then(res=>{
                this.projectList = res.data.info
                this.allPage = Math.ceil(res.data.number/10)
                this.projectList.forEach(item=>{
                    item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
                })
            })
        },
        //查看详情
        showDetail(project){
            this.detail = project
            this.dialog = true
            this.accessory = JSON.parse(project.accessory)
        },
        //更新状态
        updateAuditStatus(project,status){
            //status：1：表示通过，2表示驳回，3表示删除
            if(status==1){
                updateAuditStatus({
                    audit_status:1,
                    project_uid:project.row.uid
                }).then(res=>{
                    if(res.status==200){
                        this.projectList[project.$index].audit_status = 1
                        this.$message({
                            type:'success',
                            showClose: true,
                            duration:1000,
                            message:'操作成功'
                        })
                    }
                })
            }else if(status==2){
                updateAuditStatus({
                    audit_status:-1,
                    project_uid:project.row.uid
                }).then(res=>{
                    if(res.status==200){
                        this.projectList[project.$index].audit_status = -1
                        this.$message({
                            type:'success',
                            showClose: true,
                            duration:1000,
                            message:'操作成功'
                        })
                    }
                })
            }else{
                updateAuditStatus({
                    project_uid:project.row.uid,
                    status:-1,
                }).then(res=>{
                    if(res.status==200){
                        this.projectList[project.$index].status = -1
                        this.$message({
                            type:'success',
                            showClose: true,
                            duration:1000,
                            message:'操作成功'
                        })
                    }
                })
            }
        },
        //是否提交
        isSubmit(project,status){
            if(status==1){
                this.$confirm('确认通过审核吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.updateAuditStatus(project,status)
                    }).catch(() => {
                        this.$message({
                            type:'warning',
                            showClose: true,
                            duration:1000,
                            message:'操作取消'
                        })
                })
            }else if(status==2){
                this.$confirm('确认要驳回吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.updateAuditStatus(project,status)
                    }).catch(() => {
                        this.$message({
                            type:'warning',
                            showClose: true,
                            duration:1000,
                            message:'操作取消'
                        })
                })
            }else if(status==3){
                this.$confirm('确认要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        this.updateAuditStatus(project,status)
                    }).catch(() => {
                        this.$message({
                            type:'warning',
                            showClose: true,
                            duration:1000,
                            message:'操作取消'
                        })
                })
            }
        },
        //搜索函数
        searchProject(){
            this.status = 1
            searchProject({
                page:this.page,
                key:this.key,
            }).then(res=>{
                this.projectList = res.data.info
                this.allPage = Math.ceil(res.data.number/10)
                this.projectList.forEach(item=>{
                    item.createdAt = this.$moment(item.createdAt).format('YYYY-MM-DD HH:mm')
                })
                console.log(this.projectList)
            })
        },
        // 用户点击下一页
        gotoNextPage(){
            this.page = this.page+1
            if(this.status==0){
                this.getProjectList()
            }else{
                this.searchProject()
            }
        },
        // 用户点击上一页
        gotoPrePage(){
            this.page = this.page-1
            if(this.status==0){
                this.getProjectList()
            }else{
                this.searchProject()
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.input{
    width: 300px;
}
.btn{
    margin-left: 15px;
}
//分页
.pagination{
    display: flex;
    margin-top: 20px;
    justify-content: center;
}
.state{
    display: inline-block;
    width: 50px;
}

.dialog{
    height: 400px;
    overflow-y: scroll;
    .dialogTitle{
        text-align: center;
        padding:20px 15px;
        font-size: 20px;
        font-weight: 900;
        color: rgb(150, 150, 150);
    }
    .hr{
        border: none;
        border-bottom: 1px solid rgb(214, 214, 214);
    }
    .demandTtile{
        font-size: 17px;
        font-weight: 900;
        padding: 15px 0px;
    }
    .demand{
        padding: 10px;
        min-height: 100px;
        border: 1px solid rgb(240, 240, 240);
    }
    .detail{
        padding:0 10px;
        min-height: 100px;
        border: 1px solid rgb(240, 240, 240);
    }
}

.accessory{
    padding: 14px;
    color:rgb(64, 158, 255);
    font-size: 16px;
}

//空状态
.empty{
    font-size: 17px;
    font-weight: 900;
    color: rgb(185, 185, 185);
    text-align: center;
    padding: 10px;
}

.status{
    margin-right: 10px;
    width: 40px;
}
.btns{
    width: 30px;
}

</style>